<template>
  <div style="width: 100%; margin-left: 10px ;">
    <titleNav info="轮播图管理"></titleNav>
    <div style="margin-top: 10px; margin-bottom: 10px">
      轮播图编号：<el-input
        v-model="searchTerm"
        placeholder="请输入轮播图编号"
        style="width: 35%"
      ></el-input>

      &nbsp;
      <el-button @click="search">搜索</el-button>
      <el-button @click="nouse">取消</el-button>
    </div>

    <el-table :data="filteredData" stripe style="width: 100%">
      <el-table-column
        prop="date"
        label="轮播图编号"
        width="400"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="轮播图名称"
        width="400"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="轮播图数量"
        width="400"
      ></el-table-column>
      <el-table-column align="right">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchTerm: '',
      filteredData: [],
      tableData: [
        {
          date: '1',
          name: '1',
          address: '1'
        },
        {
          date: '2',
          name: '2',
          address: '2'
        },
        {
          date: '3',
          name: '3',
          address: '3'
        },
        {
          date: '4',
          name: '4',
          address: '4'
        },
        {
          date: '5',
          name: '5',
          address: '5'
        },
        {
          date: '6',
          name: '6',
          address: '6'
        },
        {
          date: '7',
          name: '7',
          address: '7'
        },
        {
          date: '8',
          name: '8',
          address: '8'
        },
        {
          date: '9',
          name: '9',
          address: '9'
        },
        {
          date: '10',
          name: '10',
          address: '10'
        },
        {
          date: '11',
          name: '11',
          address: '11'
        },
        {
          date: '12',
          name: '12',
          address: '12'
        }
      ]
    }
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row)
      const indexOf = this.filteredData.findIndex(
        (item) => item.date === row.date
      )
      if (indexOf) {
        this.filteredData.splice(indexOf, 1)
      } else {
        console.log('删除失败')
      }
      const indexOf1 = this.tableData.findIndex(
        (item) => item.date === row.date
      )
      if (indexOf1) {
        this.tableData.splice(indexOf1, 1)
        console.log(this.tableData)
      } else {
        console.log('删除失败')
      }
    },
    search() {
      this.filteredData = this.filteredData.filter((item) =>
        item.date.includes(this.searchTerm)
      )
    },
    nouse() {
      this.searchTerm = ''
      this.filteredData = this.tableData
    }
  },
  created() {
    this.filteredData = this.tableData.slice()
  }
}
</script>
<style scoped lang="less"></style>
